﻿module Sail {

    export interface IModalSetting {
        //弹窗标题
        title: string,
        //触发弹窗的元素
        modalHandle?: string,
        //模板名称
        tmplName?: string,
        //新增事件
        addEvent?: any,
        //确定按钮点击事件
        okEvent?: any,
        //初始化事件
        init?: any,
        //隐藏时间
        hideEvent?: any,
        //追加的样式
        cssClass?: string,
        //确定按钮标题
        okTitle?: string,
        //取消按钮标题
        cancelTitle?: string,
    }

    //弹窗模板
    export var modalTemplates = {
        dialog:
        "<div class='modal' role='dialog' data-backdrop='static' >" +
            "<div class='modal-dialog' >" +
                "<div class='modal-content'>" +
                    "<div class='modal-body'></div>" +
                "</div>" +
            "</div>" +
        "</div>",
        header:
        "<div class='modal-header'>" +
            "<a class='close' data-dismiss='modal' aria-hidden='true'>×</a><h4 class='modal-title'></h4>" +
        "</div>",
        footer:
        "<div class='modal-footer'></div>",
        cancleButton:
        "<a  class='btn btn-secondary default btnCancel' data-dismiss='modal' aria-hidden='true'></a>",
        okButton:
        '<button class="btn btn-primary blue btnOk"></button>'
    };
    

    /**
     * 弹窗插件
     */
    export class Modal {
        //默认的窗体容器
        public modal: JQuery;


        /**
         * 显示弹窗
         */
        public Show() {
            this.resetOk();
            this.modal.modal();
        }
        /**
         * 隐藏弹窗
         */
        public Hide() {
            this.modal.modal("hide");
        }

        /**
         * 修改弹窗标题
         * @param {string} title
         */
        public Title(title: string) {
            this.head.find(".modal-title").text(title);
        }

        public resetOk() {
            if (this.$ok) this.$ok.prop("disabled", false);
        }

        //标题的jquery对象
        private head: JQuery;
        private $ok: JQuery;
        /**
         * 初始化
         * @param {string} id
         * @param {any} settings
         */
        constructor(id: string, settings: IModalSetting) {

            settings = $.extend({
                title: '',
                modalHandle: "#btnAdd",
                tmplName: '#modalTmpl',
                addEvent: null,
                okEvent: null,
                init: null,
                hideEvent: null,
                cssClass: "",
                okTitle: "确定",
                cancelTitle: "取消"
            }, settings);

            var dialog = $(modalTemplates.dialog);
            dialog.prop("id", id|| guid());
            dialog.find(".modal-dialog").addClass(settings.cssClass);
            var div = dialog.find(".modal-content");
            var body = dialog.find(".modal-body");
            this.head = $(modalTemplates.header).insertBefore(body);
            this.head.find("h4").html(settings.title);

            var foot = $(modalTemplates.footer).appendTo(div);

            if (settings.cancelTitle) {
                $(modalTemplates.cancleButton).html(settings.cancelTitle).appendTo(foot);
            }

            if (settings.okTitle) {

                this.$ok = $(modalTemplates.okButton).html(settings.okTitle).appendTo(foot);
                if (settings.okEvent) this.$ok.on("click", () => {
                    if (!this.modal.CheckValidation()) return;
                    this.$ok.prop("disabled", true);
                    settings.okEvent(this);
                });
            }

            

            if (settings.hideEvent) {
                div.parent().parent().on("hidden.bs.modal", () => {
                    settings.hideEvent(this);
                });
            }

            if (settings.modalHandle && settings.addEvent) $(settings.modalHandle).click(() => {
                settings.addEvent(this);
                this.Show();
            });

            div.parent().parent().appendTo("body");

            this.modal = dialog;


            var tmpl = $.LoadHtml(settings.tmplName);
            $("<div class='clearfix divView'>").appendTo(body);
            $("<div class='clearfix divEditor'>").html(tmpl).appendTo(body);

            this.modal.initForm();
            if (settings.init) { settings.init(this.modal); }
        }
    }
}